<template>
  <div>
    <van-tabs
      color="#37B5B5"
      title-inactive-color="#999999"
      title-active-color="#333333"
      v-model="active"
      @click="onClick"
    >
      <van-tab title="待回复"> </van-tab>
      <van-tab title="已回复"> </van-tab>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :finished-text="dataOalist.length > 0 ? '没有更多了' : ''" @load="onLoad">
          <div v-if="dataOalist.length > 0">
            <div class="toAskThe" v-for="(objContent, key) in dataOalist" @click="waitReply(objContent)" :key="key">
              <div>
                <img width="20px" height="20px" src="../../assets/img/ask.png" />
                <span>{{ objContent.createTime }}</span>
              </div>
              <div>
                <div>
                  <div>
                    <img
                      v-if="!!objContent.userInfo && !!objContent.userInfo.headPortrait"
                      :src="objContent.userInfo.headPortrait | imgPaths"
                    />
                    <img v-else src="../../assets/img/mrtx.png" />
                    <span>{{ objContent.userInfo.mobilePhone | hidePhone }}</span>
                  </div>
                  <p>{{ (!!objContent.typeName && objContent.typeName) || '' }}</p>
                </div>
                <div>
                  <p>{{ objContent.content }}</p>
                  <div v-if="objContent.uploadImgs.length > 0">
                    <img
                      v-for="(items, keys) in objContent.uploadImgs"
                      :key="keys"
                      width="72px"
                      height="72px"
                      :src="items | imgPaths"
                    />
                  </div>
                </div>
              </div>
              <div class="col-999999 font-13" style="margin-left:2px">{{ objContent.replyQuantity || 0 }}个回复（咨询{{ objContent.questionQuantity || 0 }}个专家）</div>
            </div>
          </div>
          <temporarily-data v-else />
        </van-list>
      </van-pull-refresh>
    </van-tabs>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Cell,
  Tab,
  Tabs,
  Collapse,
  CollapseItem,
  Checkbox,
  CheckboxGroup,
  Popup,
  Image,
  PullRefresh,
  List
} from 'vant'
import dayjs from 'dayjs'
import { getValue, setValue } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import TemporarilyData from '@/components/temporarilyData'
export default {
  name: 'JobPlacement',
  components: {
    TemporarilyData,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List
  },
  data() {
    return {
      activeNames: [],
      dataOalist: [],
      active: 0,
      lists: [],
      result: [],
      resultSon: '',
      list: [],
      houseInfoId: getValue('fzmHourseId') || '',
      earlyWarning: [],
      totalQuantity: 0,
      loading: false,
      finished: false,
      refreshing: false,
      params: {
        page: 1,
        perPage: 10
      }
    }
  },
  created() {},
  mounted() {
    // this.earlyWarningData(0)
     this.$bridge.register('refresh', data => {
      this.refreshing = true
      this.params.page = 1
      this.onLoad()
    })
  },
  methods: {
    waitReply(item) {
      setValue('hfxxid', item.id)
      // this.$bridge.call(this.active == 1 ? 'detailsReplied' :'replyDetails' )
      this.$bridge.call('replyDetails')
    },
    onClick(e) {
      this.refreshing = true
      this.params.page = 1
      this.onLoad()
    },
    onRefresh() {
      this.params.page = 1
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      getHandle(`/agri/api/common/questionInfo/queryConsultList?replyStatus=${this.active}`, this.params).then(res => {
        if (res.status == 0) {
          if (this.refreshing) {
            this.dataOalist = []
            this.refreshing = false
          }
          this.dataOalist = this.dataOalist.concat(res.data.rows)
          this.dataOalist.forEach(item => {
            item.uploadImgs = !!item.uploadImgs ? item.uploadImgs.split(',') : []
          })
          this.loading = false

          if (this.dataOalist.length >= res.data.count) {
            this.finished = true
          } else {
            this.params.page = this.params.page + 1
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-tabs__wrap{
  border-bottom: 1px solid #eee
}
.toAskThe {
  background-color: #fff;
  margin-bottom: 10px;
  > div {
    &:first-child {
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid #eeeeee;
      padding: 0 15px;
      > span {
        font-size: 14px;
        color: #999999;
        margin-left: 10px;
      }
    }
    &:nth-child(2) {
      padding: 0 15px 10px;
      > div {
        &:first-child {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            img {
              width: 28px;
              height: 28px;
              border-radius: 14px;
              margin-right: 5px;
            }
            > span {
              font-size: 15px;
              color: #333333;
            }
          }
          > p {
            font-size: 13px;
            color: #666666;
          }
        }
        &:last-child {
          background-color: #f7f7f7;
          border-radius: 4px;
          padding: 10px;
          > p {
            font-size: 13px;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
          }
          > div {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            > img {
              margin-top: 10px;
            }
            // justify-content: flex-start
          }
          > div::after {
            content: '';
            width: 72px;
          }
        }
      }
    }
    &:last-child {
      padding: 0 15px 10px;
    }
  }
}
.van-cell__value {
  // padding: 10px 0;
  display: flex;
  align-items: center;
  > div:first-child {
    margin-right: 10px;
  }
}
.titleBox {
  margin-left: 2px;
  margin-right: 10px;
}
// .van-cell__value--alone{
//   padding: 10px 0;
// }
.titleAll {
  // position: absolute;
  // top: 20px;
  // float: right;
  padding: 12px 34px;
}
.van-cell__title {
  z-index: 10px;
}

.topCeiling {
  position: fixed;
  top: 0;
  z-index: 1;
}
.topDate {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  > p {
    font-size: 15px;
    &:first-child {
      width: 40%;
    }
    &:last-child {
      width: 40%;
    }
  }
}
.van-field__control {
  border: 0 !important;
}
.contents {
  //   border-bottom: 1px solid #eee;
  > .van-cell__value {
    flex-direction: column !important;
    align-items: flex-start;
  }

  padding: 10px 15px;
}
.marRight {
  margin-left: 18px;
}
.borderNone {
  border-bottom: none;
}
.col-333333 {
  color: #333333 !important;
}
.col-999999 {
  color: #999999 !important;
}
</style>
